<template>
    <div class="container">
        <!-- 头部 -->
        <div class="headers">
            <div>
                <i class="el-icon-arrow-left"></i>
            </div>
            <div style="width:60%">支付收银台</div>
        </div>
        <!-- 剩余时间 -->
        <div class="time">
            支付剩余时间 {{count}}
        </div>
        <div class="price">
            <div style="font-size:25px;font-weight:bold">￥299</div>
            <div style="font-size:10px;color:#666">订单编号：GY934893284932GY934</div>
        </div>
        <!-- 支付方式 -->
        <div>
            <div class="fangshi">
                <div style="width:20%">
                    <img src="../../public/image/eb14e3b17a257b0dc7914696e160fa8.jpg" width="50px" height="50px">
                </div>
                <div style="width:80%">
                    <div>支付宝</div>
                    <div style="font-size:10px">推荐有支付宝账号的用户使用</div>
                </div>
                <div>
                    <input type="radio" name="xuan">
                </div>
            </div>
            <div class="fangshi">
                <div style="width:20%">
                    <img src="../../public/image/247268a148d592db61319537b9d7972.jpg" width="50px" height="50px">
                </div>
                <div style="width:80%">
                    <div>微信支付</div>
                    <div style="font-size:10px">推荐安装微信5.0及以上的版本使用</div>
                </div>
                <div>
                    <input type="radio" name="xuan">
                </div>
            </div>
        </div>
        <!-- 支付按钮 -->
        <div class="btn">
            <el-button type="danger" class="pay" @click="pay" round>立即支付 ￥299</el-button>
        </div>
    </div>
</template>

<script>
export default {
    name: '',
    data() {
        return {
            seconds: 89000,
            count:"",
        };
    },
    props: {},

    components: {},

    created() {},

    mounted() {
        this.Time()
    },

    methods: {
        countDown(){
            let h = parseInt(this.seconds / (60 * 60) % 24);
            h = h < 10 ? '0' + h : h
            let m = parseInt(this.seconds / 60 % 60);
            m = m < 10 ? '0' + m : m
            let s = parseInt(this.seconds % 60);
            s = s < 10 ? '0' + s : s
            this.count = h + ':' + m + ':' + s
        },
        Time(){
            setInterval(() => {
                this.seconds -= 1
                this.countDown()
            },1000)
        },
        pay(){
            alert("支付成功")
            this.$router.push("/")
        }
    },

    computed: {},

    watch: {},

    directives: {},

    filters: {}
};
</script>

<style scoped>
    .headers{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
    }
    .time{
        background-color: antiquewhite;
        color: rgba(253, 6, 6, 0.667);
        text-align: center;
        padding: 5px;
        font-size: 14px;
    }
    .price{
        text-align: center;
        padding: 50px 0px;
    }
    .fangshi{
        display: flex;
        justify-content: space-between;
    }
    .btn{
        position: flex;
        width: 100%;
        bottom: 0;
        left: 0;
        z-index: 100;
    }
    .pay{
        width: 100%;
    }
</style>
